<template>
  <div class="page-nav-component">
    <div class="page-nav-container">
      <a-menu
        mode="inline"
        :open-keys="openKeys"
        :default-selected-keys="selectKeys"
        :selected-keys="selectKeys"
        :default-open-keys="openKeys"
        @openChange="onOpenChange"
        @click="jump"
      >
        <template v-for="item in menuData">
          <a-menu-item v-if="!item.childs" :key="item.id">
            <!-- <bj-icon-font :type="item.pcModulPath" style="margin-right: 10px" /> -->
            <span>{{ item.menuName }}</span>
          </a-menu-item>
          <subMenuItem v-else :key="item.id" :menu-info="item" />
        </template>
      </a-menu>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import props from "./props.js";
import subMenuItem from "./subMenuItem";
import { getPathByKey, getNodeByKey } from "./utils";
import { saveData } from "@/tools";
export default {
  name: "TreeMenu",
  mixins: [props],
  components: {
    subMenuItem,
  },
  data() {
    return {
      clickFlag: false,
      //当前激活的菜单
      activeMenu: {},
      selectKeys: [],
      openKeys: [],
    };
  },
  computed: {
    ...mapGetters(["currentMenu"]),
  },
  watch: {
    //
    currentMenu: {
      handler(val) {
        this.getActivieKeys();
      },
      deep: true,
    },

    menuData: {
      handler() {
        this.getActivieKeys();
      },
      immediate: true,
    },
  },
  mounted() {},
  methods: {
    getActivieKeys() {
      let id = this.currentMenu.id;
      this.selectKeys = id ? [id] : [];
      let linkData = getPathByKey(id, "id", this.menuData, false, "childs");
      this.openKeys = linkData.map((v) => v.id);
    },
    //点击跳转
    jump({ key }) {
      sessionStorage.clear(); //菜单跳转清空session缓存
      let itemMenu = getNodeByKey(key, "id", this.menuData, "childs");
      saveData("CURRENT_MENU", {
        ...itemMenu,
        $$DATETIMESTR: new Date().getTime(),
      });
      this.$emit("menuSelect", key);
    },

    //SubMenu 展开/关闭的回调
    onOpenChange(openKeys) {
      const latestOpenKey = openKeys.find(
        (key) => this.openKeys.indexOf(key) === -1
      );
      let linkData = getPathByKey(
        latestOpenKey,
        "id",
        this.menuData,
        false,
        "childs"
      );
      this.openKeys = linkData.map((v) => v.id);
    },
  },
};
</script>

<style lang="less" scoped>
.page-nav-component {
  height: 100%;
  width: 240px;
  overflow: hidden;
  background: #fff;
  font-family: Microsoft YaHei;
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.14);
  position: relative;
  z-index: 11;
  /deep/.circle {
    display: inline-block;
    width: 6px;
    height: 6px;
    border: 1px solid #8a9295;
    vertical-align: middle;
    margin-top: -2px;
    border-radius: 50%;
    margin-right: 6px;
  }
  .page-nav-container {
    height: 100%;
    padding: 10px 0;
    width: 260px;
    overflow: auto;
    overflow-x: hidden;
  }
  .ant-menu {
    border-right: none;
    width: 240px;
    /deep/.ant-menu-sub {
      color: #8a9295;
    }
    /deep/.ant-menu-item {
      margin-bottom: 0;
    }
    .ant-menu-item,
    /deep/.ant-menu-submenu-title {
      margin: 0;
      color: #8a9295;
      height: 46px;
      line-height: 46px;
      .ant-menu-submenu-arrow {
        &::after {
          background: #8a9295;
        }
        &::before {
          background: #8a9295;
        }
      }
    }
    /deep/.ant-menu-sub {
      background: #f8f9fb;
    }
    /deep/.ant-menu-item:hover {
      color: var(--primary-color);
      background: #e9ecf3;
    }
    /deep/.ant-menu-item-selected {
      background: #e9ecf3;
      color: var(--primary-color);
      &::after {
        border-right: 3px solid var(--primary-color);
      }
    }
  }
}
</style>
